<template>
  <div class="boxshow" v-if="partListCon">
    <!-- {{ partListCon }} -->
    <modueltitle :info="partListCon"></modueltitle>
    <div class="new_phone_shop_body">
      <div v-if="partListCon.links == 'group'">
        <!-- 拼团 -->
        <group :info="partListCon"></group>
      </div>

      <div v-else-if="partListCon.links == 'presale'">
        <!-- 预售 -->
        <presale :info="partListCon"></presale>
      </div>
      <div v-else-if="partListCon.links == 'knowledge'">
        <!-- 预售 -->
        <knowledge :info="partListCon"></knowledge>
      </div>
      <div v-else-if="partListCon.links == 'together'">
        <!-- 拼购 -->
        <together :info="partListCon"></together>
      </div>
      <div v-else-if="partListCon.links == 'auction'">
        <!-- 竞拍 -->
         <auction :info="partListCon"></auction>  
      </div>
      <div v-else-if="partListCon.links == 'lyg'">
        <!-- 零元购 -->
        <zero :info="partListCon"></zero>
      </div>
      <!-- <div v-else-if="partListCon.links == 'tour'">
        <tour :info="partListCon"></tour>
      </div> -->
      <div v-else-if="partListCon.links == 'audio'" style="background-color:transparent">
        <!-- 音频课程 -->
        <Audio :info="partListCon"></Audio>
      </div>
      <div v-else-if="partListCon.links == 'fiction'" style="background-color:transparent">
        <!-- 小说模块 -->
        <novel :info="partListCon"></novel>
      </div>
      <div v-else-if="partListCon.links == 'character'">
        <!-- 人物模块 -->
        <Character :info="partListCon"></Character>
      </div>
      <div v-else-if="partListCon.links == 'bargain'">
        <!-- 砍价 -->
        <bargain :info="partListCon"></bargain>
      </div>
      <div v-else style="background-color:transparent">
        <product :info="partListCon"></product>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

import modueltitle from "@/components/page/module/module_center/module_title_show";

import product from "@/components/page/module/productitem/product";
import group from "@/components/page/module/productitem/group";
import presale from "@/components/page/module/productitem/presale";
import tour from "@/components/page/module/productitem/tour";
import knowledge from "@/components/page/module/productitem/knowledge";
import together from "@/components/page/module/productitem/together";
import auction from "@/components/page/module/productitem/auction";
import zero from "@/components/page/module/productitem/zero";
import Audio from "@/components/page/module/productitem/audio.vue";
import novel from "@/components/page/module/productitem/novel";
import Character from "@/components/page/module/productitem/character";
import bargain from "@/components/page/module/productitem/bargain";
export default {
  data () {
    return {};
  },
  components: {
    product,
    presale,
    modueltitle,
    group,
    tour,
    knowledge,
    together,
    auction,
    zero,
    Audio,
    novel,
    Character,
    bargain
  },
  props: {
    index: {
      type: Number,
      default: -1
    }
  },
  computed: {
    ...mapState({
      active: state => state.modulePage.active,
      bannerNowIndex: state => state.modulePage.bannerNowIndex || 0,
      allbanner: state => state.modulePage.allbanner,
      partListCon () {
        if (this.index >= 0) {
          return this.allbanner[this.index];
        } else {
          return {};
        }
      }
    })
  },
  created () { },
  mounted () { },
  methods: {}
};
</script>

<style lang="less">
.boxshow {
  width: 100%;
}
.new_phone_shop_body {
  margin: 0 auto;
  position: relative;

  > div {
    background-color: #ffffff;
  }
}
.price_regular {
  color: #ff5a00 !important;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.price_regular > small {
  font-size: 10px;
  font-weight: bold;
}
.price_regular > b {
  font-size: 20px;
}
.price_regular > i {
  font-size: 10px;
  font-weight: normal;
  font-style: normal;
}
.price_regular span {
  font-weight: normal;
}
</style>
